<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的 - 记账助手</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        /* 分类编辑相关样式 */
        .category-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .category-actions {
            margin-bottom: 20px;
        }
        
        .subcategory-edit {
            background-color: #f0f5ff;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        .subcategory-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .subcategory-item {
            display: flex;
            align-items: center;
            background: white;
            border-radius: 10px;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            position: relative;
        }
        
        .subcategory-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            background: #f8f9fa;
            margin-right: 10px;
            border: 1px solid #e2e8f0;
        }
        
        .subcategory-name {
            flex: 1;
            font-size: 14px;
            color: #2d3748;
        }
        
        .subcategory-delete {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #a0aec0;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .subcategory-delete:hover {
            background: #fed7d7;
            color: #e53e3e;
        }
        
        .icon-selector {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 10px;
            margin-bottom: 20px;
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 10px;
        }
        
        .icon-item {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
        }
        
        .icon-item:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .icon-item.active {
            background: #667eea;
            color: white;
            transform: scale(1.1);
            box-shadow: 0 4px 10px rgba(102, 126, 234, 0.4);
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
        }
        
        /* 会员信息样式 */
        .vip-info {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 12px;
            padding: 15px;
            margin: 15px 0;
            border: 1px solid #dee2e6;
        }
        
        .vip-info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .vip-info-item:last-child {
            margin-bottom: 0;
        }
        
        .vip-info-label {
            font-weight: 500;
            color: #495057;
        }
        
        .vip-info-value {
            color: #FFD700;
            font-weight: bold;
        }
        
        /* 高端SVIP标记样式 */
        .vip-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 12px;
            margin-left: 8px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            overflow: hidden;
            
            /* 豪华渐变背景 */
            background: linear-gradient(135deg, 
                #FFD700 0%, 
                #FFA500 25%, 
                #FF8C00 50%, 
                #FFD700 75%, 
                #FFFF00 100%);
            background-size: 200% 200%;
            
            /* 高端阴影效果 */
            box-shadow: 
                0 4px 15px rgba(255, 215, 0, 0.4),
                0 2px 8px rgba(255, 165, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            
            /* 边框光晕 */
            border: 1px solid rgba(255, 215, 0, 0.8);
            
            /* 文字颜色和阴影 */
            color: #8B4513;
            text-shadow: 
                0 1px 2px rgba(255, 255, 255, 0.8),
                0 0 10px rgba(255, 215, 0, 0.5);
            
            /* 动画效果 */
            animation: vipShimmer 3s ease-in-out infinite,
                       vipPulse 2s ease-in-out infinite alternate;
        }
        
        .vip-badge::before {
            content: '👑';
            margin-right: 4px;
            font-size: 12px;
            filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8));
        }
        
        .vip-badge::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                transparent, 
                rgba(255, 255, 255, 0.4), 
                transparent);
            animation: vipSweep 4s ease-in-out infinite;
        }
        
        /* 闪烁动画 */
        @keyframes vipShimmer {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }
        
        /* 脉冲动画 */
        @keyframes vipPulse {
            0% {
                transform: scale(1);
                box-shadow: 
                    0 4px 15px rgba(255, 215, 0, 0.4),
                    0 2px 8px rgba(255, 165, 0, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
            }
            100% {
                transform: scale(1.05);
                box-shadow: 
                    0 6px 20px rgba(255, 215, 0, 0.6),
                    0 3px 12px rgba(255, 165, 0, 0.5),
                    inset 0 1px 0 rgba(255, 255, 255, 0.4),
                    0 0 25px rgba(255, 215, 0, 0.3);
            }
        }
        
        /* 光扫动画 */
        @keyframes vipSweep {
            0% {
                left: -100%;
            }
            50% {
                left: 100%;
            }
            100% {
                left: 100%;
            }
        }
        
        /* 悬停效果 */
         .vip-badge:hover {
             transform: scale(1.1);
             animation-duration: 1s;
             box-shadow: 
                 0 8px 25px rgba(255, 215, 0, 0.7),
                 0 4px 15px rgba(255, 165, 0, 0.6),
                 inset 0 1px 0 rgba(255, 255, 255, 0.5),
                 0 0 30px rgba(255, 215, 0, 0.4);
         }
         
         /* SVIP状态容器样式 */
          .user-vip-status {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 8px;
              min-height: 32px;
          }
          
          /* 非会员灰色SVIP标记样式 */
          .vip-badge.vip-inactive {
              /* 灰色渐变背景 */
              background: linear-gradient(135deg, 
                  #9CA3AF 0%, 
                  #6B7280 25%, 
                  #4B5563 50%, 
                  #9CA3AF 75%, 
                  #D1D5DB 100%);
              background-size: 200% 200%;
              
              /* 灰色阴影效果 */
              box-shadow: 
                  0 4px 15px rgba(156, 163, 175, 0.3),
                  0 2px 8px rgba(107, 114, 128, 0.2),
                  inset 0 1px 0 rgba(255, 255, 255, 0.2);
              
              /* 灰色边框 */
              border: 1px solid rgba(156, 163, 175, 0.6);
              
              /* 灰色文字 */
              color: #374151;
              text-shadow: 
                  0 1px 2px rgba(255, 255, 255, 0.5),
                  0 0 5px rgba(156, 163, 175, 0.3);
              
              /* 移除动画效果 */
              animation: none;
              
              /* 透明度降低 */
              opacity: 0.7;
          }
          
          .vip-badge.vip-inactive::before {
              content: '👑';
              margin-right: 4px;
              font-size: 12px;
              filter: grayscale(100%) opacity(0.6);
          }
          
          .vip-badge.vip-inactive::after {
              display: none;
          }
          
          .vip-badge.vip-inactive:hover {
              transform: scale(1.02);
              opacity: 0.8;
              box-shadow: 
                  0 6px 18px rgba(156, 163, 175, 0.4),
                  0 3px 10px rgba(107, 114, 128, 0.3),
                  inset 0 1px 0 rgba(255, 255, 255, 0.3);
          }
    </style>
</head>
<body>
    <div class="screen">
            
            <div class="app-container">
                <div class="user-header">
                    <div class="user-avatar">👤</div>
                    <div class="user-name">
                        张三
                    </div>
                    <div class="user-id">ID: 10086</div>
                    <div class="user-vip-status">
                        <span class="vip-badge" id="vip-badge" style="display: none;">SVIP</span>
                    </div>
                </div>
                
                <div class="menu-list">
                    <div class="menu-item" id="personal-info-btn">
                        <div class="menu-item-left">
                            <div class="menu-icon">👤</div>
                            <div class="menu-text">个人信息</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    
                    <div class="menu-item" id="change-password-btn">
                        <div class="menu-item-left">
                            <div class="menu-icon">🔒</div>
                            <div class="menu-text">修改密码</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    
                    <div class="menu-item" id="bind-wechat-btn">
                        <div class="menu-item-left">
                            <div class="menu-icon" style="color: #07C160;">WeChat</div>
                            <div class="menu-text">绑定微信</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    
                    <div class="menu-item" onclick="window.location.href='account-books.html'">
                        <div class="menu-item-left">
                            <div class="menu-icon">📚</div>
                            <div class="menu-text">账本管理</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    
                    <div class="menu-item" onclick="window.location.href='budget-management.html'">
                        <div class="menu-item-left">
                            <div class="menu-icon">💰</div>
                            <div class="menu-text">预算管理</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    
                    <div class="menu-item" onclick="window.location.href='member-benefits.html'">
                        <div class="menu-item-left">
                            <div class="menu-icon" style="color: #FFD700;">👑</div>
                            <div class="menu-text">会员中心</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    
                    <div class="menu-item" onclick="window.location.href='member-redeem.html'">
                        <div class="menu-item-left">
                            <div class="menu-icon" style="color: #667eea;">🎫</div>
                            <div class="menu-text">会员兑换</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    
                    <div class="menu-item" onclick="window.location.href='export-bill.html'">
                        <div class="menu-item-left">
                            <div class="menu-icon" style="color: #38b2ac;">📊</div>
                            <div class="menu-text">导出账单</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    
                    <div class="menu-item" onclick="window.location.href='about-us.html'">
                        <div class="menu-item-left">
                            <div class="menu-icon" style="color: #4299e1;">ℹ️</div>
                            <div class="menu-text">关于我们</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                    
                    <div class="menu-item" id="logout-btn" style="margin-top: 30px;">
                        <div class="menu-item-left">
                            <div class="menu-icon" style="color: #e53e3e;">🚪</div>
                            <div class="menu-text" style="color: #e53e3e;">退出登录</div>
                        </div>
                        <div class="menu-arrow">›</div>
                    </div>
                </div>
            </div>
            
            <div class="bottom-nav">
                <div class="nav-item" data-page="index.html">
                    <div class="nav-icon">🏠</div>
                    <div>首页</div>
                </div>
                <div class="nav-item" data-page="statistics.html">
                    <div class="nav-icon">📊</div>
                    <div>统计</div>
                </div>
                <div class="nav-item" id="quick-record-btn">
                    <div class="nav-icon" style="font-size: 24px;">➕</div>
                    <div>记账</div>
                </div>
                <div class="nav-item" data-page="details.html">
                    <div class="nav-icon">📝</div>
                    <div>明细</div>
                </div>
                <div class="nav-item active" data-page="user.html">
                    <div class="nav-icon">👤</div>
                    <div>我的</div>
                </div>
            </div>
        </div>
    
    <!-- 个人信息弹窗 -->
    <div class="record-form" id="personal-info-modal">
        <div class="record-form-content">
            <div class="record-form-header">
                <div class="record-form-title">个人信息</div>
                <div class="close-btn" id="close-personal-info">✕</div>
            </div>
            
            <form id="personal-info-form">
                <div class="form-group">
                    <label class="form-label">用户名</label>
                    <input type="text" class="form-input" id="username" value="张三" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">手机号</label>
                    <input type="tel" class="form-input" id="phone" value="138****1234" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">邮箱</label>
                    <input type="email" class="form-input" id="email" value="zhangsan@example.com">
                </div>
                
                <button type="submit" class="btn btn-primary">保存</button>
            </form>
        </div>
    </div>
    
    <!-- 修改密码弹窗 -->
    <div class="record-form" id="change-password-modal">
        <div class="record-form-content">
            <div class="record-form-header">
                <div class="record-form-title">修改密码</div>
                <div class="close-btn" id="close-change-password">✕</div>
            </div>
            
            <form id="change-password-form">
                <div class="form-group">
                    <label class="form-label">当前密码</label>
                    <input type="password" class="form-input" id="current-password" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">新密码</label>
                    <input type="password" class="form-input" id="new-password" required>
                </div>
                
                <div class="form-group">
                    <label class="form-label">确认新密码</label>
                    <input type="password" class="form-input" id="confirm-new-password" required>
                </div>
                
                <button type="submit" class="btn btn-primary">确认修改</button>
            </form>
        </div>
    </div>
    

    
    <!-- 会员兑换弹窗 -->
    <div class="record-form" id="vip-redeem-modal">
        <div class="record-form-content">
            <div class="record-form-header">
                <div class="record-form-title">会员兑换</div>
                <div class="close-btn" id="close-vip-redeem">✕</div>
            </div>
            
            <form id="vip-redeem-form">
                <div class="form-group">
                    <label class="form-label">兑换码</label>
                    <input type="text" class="form-input" id="redeem-code" placeholder="请输入兑换码" required>
                </div>
                
                <div class="vip-info">
                    <div class="vip-info-item">
                        <span class="vip-info-label">会员类型：</span>
                        <span class="vip-info-value">永久SVIP</span>
                    </div>
                    <div class="vip-info-item">
                        <span class="vip-info-label">会员特权：</span>
                        <span class="vip-info-value">无限制记账、高级统计、数据导出</span>
                    </div>
                </div>
                
                <button type="submit" class="btn btn-primary">立即兑换</button>
            </form>
        </div>
    </div>
    
    <!-- 一句话记账弹窗 -->
    <div class="quick-record" id="quick-record-modal">
        <div class="quick-record-header">
            <div class="quick-record-title">一句话记账</div>
            <div class="close-btn" id="close-quick-record">✕</div>
        </div>
        <div class="voice-input">
            <input type="text" class="voice-input-field" id="voice-input-field" placeholder="例如：今天午餐花了30元">
            <div class="mic-btn" id="mic-btn">🎤</div>
        </div>
        <button class="btn btn-primary" id="submit-quick-record">识别并记账</button>
    </div>
    
    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>
    
    






<script>
    // 会员状态管理
    let isVip = localStorage.getItem('isVip') === 'true' || false;
    
    // 初始化会员状态显示
    function initVipStatus() {
        const vipBadge = document.getElementById('vip-badge');
        vipBadge.style.display = 'inline-flex';
        
        if (isVip) {
            vipBadge.className = 'vip-badge vip-active';
        } else {
            vipBadge.className = 'vip-badge vip-inactive';
        }
    }
    
    // 更新当前时间
    function updateTime() {
        const now = new Date();
        let hours = now.getHours();
        let minutes = now.getMinutes();
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        // 移除对不存在元素的引用
        // document.getElementById('current-time').textContent = `${hours}:${minutes}`;
    }
    
    // 初始化时间和会员状态
    updateTime();
    initVipStatus();
    setInterval(updateTime, 60000);
    
    // 底部导航切换页面
    document.querySelectorAll('.nav-item[data-page]').forEach(item => {
        item.addEventListener('click', function() {
            window.location.href = this.getAttribute('data-page');
        });
    });
    
    // 一句话记账功能
    const quickRecordBtn = document.getElementById('quick-record-btn');
    const quickRecordModal = document.getElementById('quick-record-modal');
    const closeQuickRecord = document.getElementById('close-quick-record');
    const overlay = document.getElementById('overlay');
    
    quickRecordBtn.addEventListener('click', function() {
        quickRecordModal.classList.add('active');
        overlay.classList.add('active');
    });
    
    closeQuickRecord.addEventListener('click', function() {
        quickRecordModal.classList.remove('active');
        overlay.classList.remove('active');
    });
    
    // 麦克风按钮点击事件
    const micBtn = document.getElementById('mic-btn');
    const voiceInputField = document.getElementById('voice-input-field');
    
    micBtn.addEventListener('click', function() {
        // 模拟语音识别
        showAlert('正在启动语音识别...');
        setTimeout(() => {
            voiceInputField.value = '今天午餐花了45元';
        }, 1500);
    });
    
    // 提交一句话记账
    const submitQuickRecord = document.getElementById('submit-quick-record');
    
    submitQuickRecord.addEventListener('click', function() {
        const inputText = voiceInputField.value.trim();
        if (!inputText) {
            showAlert('请输入或语音录入记账内容');
            return;
        }
        
        // 模拟识别处理
        showAlert('正在识别内容...');
        setTimeout(() => {
            // 关闭一句话记账弹窗
            quickRecordModal.classList.remove('active');
            overlay.classList.remove('active');
            
            // 跳转到记账页面
            window.location.href = 'index.html';
        }, 1500);
    });
    
    // 个人信息弹窗
    const personalInfoBtn = document.getElementById('personal-info-btn');
    const personalInfoModal = document.getElementById('personal-info-modal');
    const closePersonalInfo = document.getElementById('close-personal-info');
    
    personalInfoBtn.addEventListener('click', function() {
        personalInfoModal.classList.add('active');
        overlay.classList.add('active');
    });
    
    closePersonalInfo.addEventListener('click', function() {
        personalInfoModal.classList.remove('active');
        overlay.classList.remove('active');
    });
    
    // 修改密码弹窗
    const changePasswordBtn = document.getElementById('change-password-btn');
    const changePasswordModal = document.getElementById('change-password-modal');
    const closeChangePassword = document.getElementById('close-change-password');
    
    changePasswordBtn.addEventListener('click', function() {
        changePasswordModal.classList.add('active');
        overlay.classList.add('active');
    });
    
    closeChangePassword.addEventListener('click', function() {
        changePasswordModal.classList.remove('active');
        overlay.classList.remove('active');
    });
    

    
    // 会员兑换弹窗
    const vipRedeemBtn = document.getElementById('vip-redeem-btn');
    const vipRedeemModal = document.getElementById('vip-redeem-modal');
    const closeVipRedeem = document.getElementById('close-vip-redeem');
    
    vipRedeemBtn.addEventListener('click', function() {
        vipRedeemModal.classList.add('active');
        overlay.classList.add('active');
    });
    
    closeVipRedeem.addEventListener('click', function() {
        vipRedeemModal.classList.remove('active');
        overlay.classList.remove('active');
    });
    
    // 绑定微信
    document.getElementById('bind-wechat-btn').addEventListener('click', function() {
        showAlert('正在跳转到微信授权页面...');
    });
    
    // 退出登录
    document.getElementById('logout-btn').addEventListener('click', function() {
        if (confirm('确定要退出登录吗？')) {
            window.location.href = 'login.html';
        }
    });
    

    

    
    // 个人信息表单提交
    document.getElementById('personal-info-form').addEventListener('submit', function(e) {
        e.preventDefault();
        showAlert('个人信息已更新');
        personalInfoModal.classList.remove('active');
        overlay.classList.remove('active');
    });
    
    // 修改密码表单提交
    document.getElementById('change-password-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const currentPassword = document.getElementById('current-password').value;
        const newPassword = document.getElementById('new-password').value;
        const confirmNewPassword = document.getElementById('confirm-new-password').value;
        
        if (!currentPassword || !newPassword || !confirmNewPassword) {
            showAlert('请填写完整的密码信息');
            return;
        }
        
        if (newPassword !== confirmNewPassword) {
            showAlert('两次输入的新密码不一致，请重新输入');
            return;
        }
        
        showAlert('密码修改成功');
        changePasswordModal.classList.remove('active');
        overlay.classList.remove('active');
        this.reset();
    });
    
    // 会员兑换表单提交
    document.getElementById('vip-redeem-form').addEventListener('submit', function(e) {
        e.preventDefault();
        const redeemCode = document.getElementById('redeem-code').value.trim();
        
        if (!redeemCode) {
            showAlert('请输入兑换码');
            return;
        }
        
        // 模拟兑换码验证（实际应用中应该调用后端API）
        const validCodes = ['VIP2024', 'SVIP888', 'PREMIUM999'];
        
        if (validCodes.includes(redeemCode.toUpperCase())) {
            // 兑换成功
            isVip = true;
            localStorage.setItem('isVip', 'true');
            initVipStatus();
            
            showAlert('恭喜您！会员兑换成功，您已成为永久SVIP会员！');
            vipRedeemModal.classList.remove('active');
            overlay.classList.remove('active');
            document.getElementById('redeem-code').value = '';
            this.reset();
        } else {
            showAlert('兑换码无效，请检查后重新输入');
        }
    });


// Bootstrap 模态框函数
function showAlert(message) {
    document.getElementById('alertModalBody').textContent = message;
    const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
    alertModal.show();
}
</script>

<!-- Bootstrap 模态框 -->
<div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="alertModalLabel">提示</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="alertModalBody">
                <!-- 动态内容 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>